<script lang="ts" setup name="SupplierArea">
import { CirclePlus, Delete } from '@element-plus/icons-vue'
import { cloneDeep } from 'lodash-es'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import {
  createSupplierAreaAPI,
  deleteAllSupplierAreaAPI,
  deleteSupplierAreaAPI,
  editSupplierAreaAPI,
  getSupplierAreaAPI,
} from '~/src/api/goods'
import { Information } from '~/src/api/interface/information'
import { supplierAreaColumns } from '../columns/supplierAreaColumns'
import SupplierAreaDialog from './SupplierAreaDialog.vue'
const tableRef = ref<ProTableInstance>()

const onDelete = async (type: string) => {
  if (type !== 'all') {
    await useHandleData(deleteSupplierAreaAPI, { id: type }, `删除【${type}】供应商区域`)
    tableRef.value?.getTableList()
  } else {
    useDeleteData(deleteAllSupplierAreaAPI, tableRef.value as ProTableInstance)
  }
}

const supplierAreaRef = ref<InstanceType<typeof SupplierAreaDialog>>()
const openDialog = (title: string, row?: Information.SupplierAreaList) => {
  supplierAreaRef.value?.acceptParams({
    title,
    row: row ? cloneDeep(row) : { name: '', areaCode: '' },
    isView: false,
    api: title === '新增' ? createSupplierAreaAPI : title === '编辑' ? editSupplierAreaAPI : undefined,
    categories: tableRef.value!.tableData,
    getTableList: tableRef.value?.getTableList,
  })
}
</script>

<template>
  <div class="default-table-container auto-height-container">
    <div class="table-box height100">
      <pro-table
        ref="tableRef"
        :columns="supplierAreaColumns"
        :indent="20"
        :isCard="false"
        :pagination="false"
        :request-api="getSupplierAreaAPI"
        row-key="id"
        title="商品分类列表"
      >
        <template #tableHeader>
          <el-button :icon="CirclePlus" type="primary" @click="openDialog('新增')">新增供应商区域</el-button>
          <el-button :icon="Delete" type="primary" @click="onDelete('all')">删除</el-button>
        </template>
        <template #operation="{ row }">
          <el-button link type="primary" @click.stop="onDelete(row.id)">删除</el-button>
        </template>
        <template #areaCode="{ row }">
          <el-button link type="primary" @click.stop="openDialog('编辑', row)">{{ row.areaCode }}</el-button>
        </template>
        <template #isShow="{ row }">
          <el-switch v-model="row.isShow" disabled />
        </template>
      </pro-table>
    </div>
    <supplier-area-dialog ref="supplierAreaRef" />
  </div>
</template>

<style lang="scss" scoped></style>
